import Container from "@/components/common/Carousel"
import Article from "@/components/research/ariticle"
import { useEffect, useState } from "react"
import axios from "axios"
import Table from "@/components/common/Table"
import Image from "next/image"
import withTranslate from "@/hocs/withTranslate"

const datas = [
    { text: "Web The AI-powered design solutions they offered not only look amazing but are also highly effective in attracting customers. I'm thrilled with the results!", name: "2025/02/12", profilePic: "https://plus.unsplash.com/premium_photo-1681319553238-9860299dfb0f?auto=format&fit=crop&q=80&w=2831&ixlib=rb-4.0.3" },
    { text: "Their AI-driven design techniques have improved user experience and conversion rates. The team at Web Design AI is a game-changer in the web design industry", name: "2025/02/12", profilePic: "https://plus.unsplash.com/premium_photo-1681319553238-9860299dfb0f?auto=format&fit=crop&q=80&w=2831&ixlib=rb-4.0.3" },
    { text: "The AI-powered design solutions they offered not only look amazing but are also highly effective in attracting customers. I'm thrilled with the results!", name: "2025/02/12", profilePic: "https://plus.unsplash.com/premium_photo-1681319553238-9860299dfb0f?auto=format&fit=crop&q=80&w=2831&ixlib=rb-4.0.3" },
]

const imageSrc = [
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
];

function Design({t}) {

    const [datas, setDatas] = useState([])

    const loadSavedImages = async () => {
        const response = await axios.post('/api/news/list', { page: 1, size: 10 })
        setDatas(response.data.data)
    } 

    useEffect(() => {
        loadSavedImages()
    }, [])

      const columns = [
            { label: t('table.image'), key: "url", type: "image", render: (row) => <Image src={row.url} width={100} height={100} /> },
            { label: t('table.title'), key: "title", type: "text" },
            { label: t("table.author"), key: "author" },
            { label: t('table.date'), key: "created", type: "date" }
          ];



    return (
        <div className="grid place-items-center w-full pb-48">
            <Container urls={imageSrc} />
            <div className='place-items-center w-4/5 pt-10'>
            <Table columns={columns} data={datas} />

            </div>


        </div>
    )

}

export default withTranslate(Design)